import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// 为了方便svg图标的使用，已经将svg的使用封装成了组件
// <svg-icon></svg-icon>  原理
Vue.component('svg-icon', SvgIcon)

// import './svg/dashboard.svg'
// import './svg/example.svg'

// require.context(directory, useSubdirectories, regExp)
// 1. 要查找要导入的是哪个目录
// 2. 是否查找子目录
// 3. 要匹配文件的正则
const req = require.context('./svg', false, /\.svg$/)
// req.keys() 可以拿到要处理的 路径的集合，将来就可以进行批量导入

// 对于提供好配置号的所有路径，进行一个统一的导入， 所有的文件模块都导入成功
const requireAll = requireContext => {
  return requireContext.keys().map(requireContext)
}

// 最终即可对所有的匹配的目录文件，进行一个个的导入
requireAll(req)

// requireAll(req).forEach(item => {
//   console.log(item)
// })

// 这边我们svg图标，只需要导入即可，后续学习 svg-sprites => svg-sprites-loader(webpack插件)
// svg-sprites-loader: 会将导入的所有svg文件，自动拼到一起，放到一个大的容器中
// 容器 => 11 个 svg图标

// require.context => 实现导入文件的自动化！
